<template>
<div class="header">
  <div class="contirner">
    <div class="right-list">
      <el-tabs v-model="$route.path" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="学员中心首页" name="/user"></el-tab-pane>
<!--        <el-tab-pane label="个人中心" name="/personCenter"></el-tab-pane>-->
      </el-tabs>
    </div>
    <div class="rightContent">
      欢迎您:{{$store.state.user_name}}
      <span class="close" @click="close">退出</span>
    </div>
  </div>
</div>

</template>

<script>
  import Cookies from 'js-cookie'
import {ref} from "vue";
import {useRouter,useRoute} from "vue-router";
import {useStore} from 'vuex'

export default {
  name: "Header",
  setup(){
    let store = useStore();
    let $router = useRouter();
    const handleClick = (tab, event) => {
      $router.push({path:tab.props.name})
    }
    let close = () =>{
      Cookies.remove('token');
      store.commit('setToken','')
      location.reload();
    }
    return{
      close,
      handleClick
    }
  }
}
</script>

<style>
.right-list .el-tabs__nav-wrap::after{
  height: 0px;
}
.right-list .el-tabs--top{
  line-height: 56px;
}
</style>

<style scoped>
  .close{
    cursor: pointer;
  }
  .close:hover{
    color: #409EFF;
  }
.header{
  width: 100%;
  height: 70px;
  background-color: white;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  position: fixed;
  z-index: 2;
}
.header .contirner{
  width: 75rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.left-img{
  width: 15.625rem;
  height: 3.9375rem;
  background-size: contain;
  background-image: url("https://img.js.design/assets/img/624d091f429c3e31fa0f330c.png");
  margin-bottom: 0.5rem;
}

</style>
